<template>
  <div class="box">
    <div class="w100 flex-row j-sb ">
      <build-el-h1 name="参选人展示.png" type="1"></build-el-h1>
      <build-el-more src="Vote" style="margin-bottom: 15px;"></build-el-more>
    </div>
    <div
      class="w100 flex-row people-list j-sb"
      v-loading="Boolean(tableData === null)"
    >
      <build-el-list-people
        v-for="item in tableData"
        :key="item.artistId"
        :artistId="item.worksId"
        :titleImg="item._listImage"
        :picture="item._picture"
        :author="item.author"
        :companyName="item.companyName"
        :artistPosition="item.artistPosition"
        :ticketNumber="item.number"
        :artistName="item.worksTitle"
      ></build-el-list-people>
    </div>
  </div>
</template>
<script>
import buildElH1 from '../build-el-h1'
import buildElMore from '../build-el-more'
import buildElListPeople from '../build-el-list-people'
import JSONData from '@/assets/JSON'
export default {
  components: {
    buildElH1,
    buildElMore,
    buildElListPeople,
  },
  data() {
    return {
      tableData: null,
      ...JSONData,
    }
  },
  async created() {
    await this.init(1)
  },
  methods: {
    async init(page) {
      this.tableData = []
      let tableData = await this.api.findNewVoteArtistList(1, 12)
      this.tableData = tableData.list
      console.log('蚕丝啊人展示', this.tableData)
    },
    changePage(e) {
      this.pageNow = e
      this.init(e)
    },
  },
}
</script>
<style lang="less" scoped>
.box {
  box-sizing: content-box;
  padding: 25px 20px;
  .people-list {
    flex-wrap: wrap;
  }
}
</style>
